<template>
	<div class="subpage purchase-order-container">
		<ul class="order-tabs">
			<li v-for="(item, index) in orderTabList" :key="index" :class="index == activeTab ? 'order-tab-active' : ''" @click="changeOrderList(item.index, item.tab)">{{item.name}}</li>
		</ul>
		<div class="order-list-container">
			<div class="order-list-box">
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
					<van-list 
						v-model="loading" 
						:immediate-check="false" 
						:finished="finished" 
						finished-text="已加载全部了哦～"
						@load="onLoadMore"
						v-if="listData.length > 0"
					>

						<components :is="currentView" :listData="listData"></components>
					</van-list>
					<div class="no-data-box" v-else>
						<img src="@/assets/img/home_img27.png" alt="" v-show="showNoInfo">
						<span v-show="showNoInfo">{{noDataText}}</span>
					</div>
				</van-pull-refresh>
			</div>

		</div>
	</div>
</template>

<script>
	import time from '@/utils/time.js';   //  未来时间距离现在多少年多少月
	
	import { Tab, Tabs, PullRefresh, List } from 'vant';

	import Tab1 from './tabs/Tab1.vue'
	import Tab2 from './tabs/Tab2.vue'
	import Tab3 from './tabs/Tab3.vue'

	export default {
		inject: ['reload'],
		components: {
			Tab1,
			Tab2,
			Tab3,
			[Tab.name]: Tab,
			[Tabs.name]: Tabs,
			[PullRefresh.name]: PullRefresh,
			[List.name]: List
		},
		data() {
			return {
				currentView: 'Tab1', // 默认选中第一项
				orderTabList: [{
						name: '转售',
						index: 0,
						tab: 'Tab1'
					},
					{
						name: '转售中',
						index: 1,
						tab: 'Tab2'
					},
					{
						name: '已转售',
						index: 2,
						tab: 'Tab3'
					},
				],
				activeTab: 0,
				resaleCategory: 1,
				listData: [],
				loading: false,
				isLoading: false,
				finished: false,
				pageIndex: 1,
				pageSize: 10,
				noDataText: '您还没有采购货品哦，赶快去采购吧！',
				type: null,
				showNoInfo: false
			};
		},
		created(){
			this.getResaleList()
		},
		methods: {
			resetParams() {
				this.listData = [];
			    this.loading = false;
			    this.finished = false;
				this.pageIndex = 1;
				this.showNoInfo = false;
			},
			// 切换tab栏  
			changeOrderList(index, tab) {
				if(this.activeTab == index){
					return;
				}
				this.currentView = tab;
				this.activeTab = index;
				this.resaleCategory = index + 1;
				this.isLoading = true;
            	this.onRefresh();
				switch(index) {
					case 0:
						this.noDataText = '您还没有采购货品哦，赶快去采购吧！';    // 转售
						break;
					case 1:
						this.noDataText = '您还没有转售中记录哦～';              //  转售中
						break;
					case 2:
						this.noDataText = '您还没有已转售记录哦～';				//   已转售
						break;
					default:
						this.noDataText = '暂无数据';
						break;
				}
			},
			// 转售列表数据
			getResaleList(){
				let getData = {
					pgCt: this.pageIndex,
					pgSz: this.pageSize,
					resaleCategory: this.resaleCategory
				}
				let apiUrl = this.pageIndex > 1 ? '/api/resale/list?noLoading' : '/api/resale/list';
				
				this.$api.get(apiUrl, getData)
				.then(({data})=>{
					console.log(data)
					this.showNoInfo = data.total > 0 ? false : true;
					this.listData = this.listData.concat(data.records);
					// 数据全部加载完成
					if(this.pageIndex > 1 && data.records.length < 10){
						this.finished = true;
					}
				})
			},
			onRefresh() {
			    this.resetParams()
				setTimeout(()=>{
					this.getResaleList();
					this.isLoading = false;
				},500)
			},
			onLoadMore() {
				// 异步更新数据
				setTimeout(() => {
				    this.pageIndex++;
				    this.getResaleList()
				    // 加载状态结束
				    this.loading = false;
				}, 500);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-tabs {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
        width: 100%;
        height: 48px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 6px;
        box-sizing: border-box;
        background-color: #fff;
        li {
            padding: 0 4px;
            box-sizing: border-box;
            height: 48px;
            line-height: 48px;
            font-size: 16px;
            color: #5D6164;
            &.order-tab-active {
                position: relative;
                color: #31BC8D;
                &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 2px;
                    background-color: #31BC8D;
                }
            }
        }
    }
    .order-list-container {
        width: 100%;
        height: calc(100% - 48px);
        margin-top: 48px;
        overflow-y: scroll;
        .no-data-box {
            width: 100%;
            height: calc(100vh - 48px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #999;
            img {
                width: 68px;
                height: 104px;
                object-fit: cover;
                margin-top: -90px;
                margin-bottom: 14px;
            }
        }
    }
</style>